<template>
  <div>
    <ul class="todo-main">
        <!-- 使用props传递过来todos数组 动态渲染item -->
        <!-- v-for也是可以遍历组件标签 数组长度有多少 item组件就有多少个-->
       <Item v-for="todo in todos" :key="todo.id" :todo="todo" :updateOneTodo="updateOneTodo" :deleteOneTodo="deleteOneTodo"></Item>
    </ul>
  </div>
</template>

<script>
import Item from '@/components/Item';
export default {
  name: 'Main',
    // props接收App传递过来的todos数据-数组（todos是属性名）
    // props接收的数据也会出现在当前组件实例身上 所以咱们可以直接this.xxx使用 也可以直接在模板中使用
  props:['todos','updateOneTodo','deleteOneTodo'],
  components:{
    Item,
  },

}
</script>

<style scoped>

/*main*/
.todo-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}
</style>
